import md5 from '../lib/spark-md5.js';
import qs from '../lib/qs.js';
import axios from '../lib/axios.js';

//#region md5加密演示部分
let txtMd5 = document.getElementById('txtMd5');
let btnMd5 = document.getElementById('btnMd5');
let spMd5 = document.getElementById('spMd5');

btnMd5.addEventListener('click', () => {
  spMd5.innerHTML = md5.hash(txtMd5.value);
});

//#endregion

//#region qs库演示部分
// qs库的作用是转换json格式和表单数据格式的
// 表单数据格式：键1=值1&键2=值2...
let user = {
  name: '黑暗骑士',
  password: 'abcd - 1234',
};

console.log('json的用户信息:', user);
let qsuser = qs.stringify(user);
console.log('查询字符串格式的用户信息：', qsuser);

let qsstr = 'abc=123&def=hhy';
console.log('查询字符串转json', qs.parse(qsstr));

//#endregion

//#region  axios库演示部分
let txtEcho = document.getElementById('txtEcho');
let btnEcho = document.getElementById('btnEcho');
let divEcho = document.getElementById('divEcho');

// 网站根地址
let serverUrl = 'https://service.huhuiyu.top/teach_project_service';

btnEcho.addEventListener('click', () => {
  // 发起网络请求，1：网站的地址,2:请求的功能路径，3：需要的参数，4：回应结果
  let promise = axios({
    url: serverUrl + '/?echo=' + txtEcho.value,
    method: 'get',
    // data: 'echo=' + txtEcho.value,
  });

  promise
    .then((resp) => {
      console.log('请求的结果：', resp.data);
      // JSON.stringify可以将json对象转换成字符串格式
      divEcho.innerHTML = JSON.stringify(resp.data);
    })
    .catch((err) => {
      console.error('请求发生错误：', err);
    });
});

// 获取ip对应城市信息的演示
let btnCity = document.getElementById('btnCity');
let divCity = document.getElementById('divCity');

btnCity.addEventListener('click', () => {
  let promise = axios({
    method: 'POST',
    url: serverUrl + '/api/queryIpCtiyInfo',
    data: '',
  });

  promise
    .then((resp) => {
      divCity.innerHTML = JSON.stringify(resp.data, null, 2);
    })
    .catch((err) => {
      console.error(err);
    });
});

//#endregion
